<template>
  <div class="TaskDetail">
    <crumb />
    <div class="detail-box">
      <div class="left-box">
        <div class="title">
          {{info.taskName}}
        </div>
        <div class="desc">
          {{info.taskRequest}}
        </div>
        <div class="other-box">
          <div style="color:#5A74A6;">[{{info.taskTypeName}}]</div>
          <div>题量：{{info.subjectNum}}</div>
          <div>{{info.publishTime}}</div>
        </div>
        <div class="line"></div>
        <CompleteList :resourceLessonChapterId="id" :type="2" :list="info.finishedList" :size="Number(info.finishedSize)" />
        <!-- <StartBox :info="info" @startTest="startTest" /> -->
      </div>
      <div class="right-box">
        <questionsList :questionsInfo="questionsInfo" :testDuration="info.testDuration" @getReport="getReport"  :type="2" />
      </div>
    </div>
  </div>
</template>

<script>
import CompleteList from '@/views/student/components/CompleteList'
// import StartBox from '@/views/student/components/test/StartBox'
import { taskMain, taskStart, updateDuration } from '@/api/student/lesson/task'
import questionsList from '@/views/student/components/test/questionsList'

export default {
  name: 'TaskDetail',
  components: {
    CompleteList,
    questionsList
    // StartBox
  },
  data () {
    return {
      id: '',
      type: '',
      info: {},
      questionsInfo: {}
    }
  },
  mounted () {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.taskMain()
  },
  methods: {
    async taskMain () {
      const res = await taskMain({
        id: this.id,
        taskType: this.type
      })
      if (res.code === '200') {
        this.info = res.data
        this.info['testStatus'] = '0'
        this.info['fatherChapterName'] = this.info.taskName
        this.taskStart()
      } else {
        this.$message.error(res.message)
      }
    },
    async taskStart () {
      const res = await taskStart({
        id: this.id,
        taskType: this.type,
        resourceLessonChapterId: this.info.lessonChapterId
      })
      if (res.code === '200') {
        this.questionsInfo = res.data
        this.updateDurationStart()
      } else {
        this.$message.error(res.message)
      }
    },
    updateDuration () {
      updateDuration({
        testBatchId: this.questionsInfo.testBatchId
      })
    },
    updateDurationStart () {
      clearInterval(this.timer)
      this.timer = null
      this.timer = setInterval(() => {
        this.updateDuration()
      }, 8000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(this.timer)
        this.timer = null
      })
    },
    getReport () {

    }
  }
}
</script>

<style lang="scss" scoped>
.TaskDetail {
  margin-top: 0;
  .detail-box {
    display: flex;
    justify-content: space-between;
    .left-box {
      width: 452px;
      height: 715px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
      padding: 0 10px;
      .title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(16, 29, 55, 1);
      }
      .desc {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 22px;
      }
      .other-box {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(145, 149, 154, 1);
        line-height: 52px;
      }
    }
    .right-box {
      width: 728px;
      min-height: 714px;
      padding: 20px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(229, 229, 229, 1);
      border-radius: 5px;
    }
  }
}
</style>
